<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<title>テーブルヘッド固定</title>
<script src="/js/fixed.js"></script>
<style>
    body,table,tr,th,td,h1,h2,h3,h4,h5,h6,a,span,div,img,ul,ol {
    	font-size:12px;
    	margin:0;
    	padding:0;
    }

    table.sample {
    	border-color:#7777aa;
    }
    table.sample th, table.sample td {
    	padding:1;
    	background-color: #ffffff;
    }

    table.sample th.a {
    	color:3030a0;
    	background-color:ccddff;
    	font-weight:100;
    }

    table.sample th.b {
    	color:ffffff;
    	background-color:4444b0;
    	font-weight:100;
    }
    .copyright {
    	vertical-align:bottom;
    	background-color:#4444cc;
    }

    /* 選択行の色 */
    table.sample tr.selected td {
    	background-color:ffff99;
    }

    #Fixed_middle table,
    #Fixed_middle table thead,
    #Fixed_middle table thead tr,
    #Fixed_middle table tbody,
    #Fixed_middle table tr,
    #Fixed_middle table td,
    #Fixed_middle table th {
    	border:solid;
    	white-space:nowrap;
    	border-collapse: collapse;
    	border-width:0;
    }

    #Fixed_middle table .Fixed_left {
    	border-left-width:1;
    }

    #Fixed_middle {
    	position: relative;
    	overflow: auto;
    	display: inline;
    	width: 100%;
    	z-index:0;
    }
    #Fixed_middle thead tr th {
    	border-right-width:1;
    	border-bottom-width:1;
    	position:relative;
    	top: expression(this.offsetParent.scrollTop);
    	z-index:5;
    }
    #Fixed_middle tbody tr td {
    	border-right-width:1;
    	border-bottom-width:1;
    	position:relative;
    	z-index:0;
    }
    #Fixed_shimTbl {
    	position:absolute;
    	top: expression(this.offsetParent.scrollTop);
    	left: expression(parentNode.scrollLeft);
    	background-color:#ffffff; /* background color of table */
    	z-index:4;
    }
    #Fixed_shimRow {
    	position:absolute;
    	top: expression(this.offsetParent.scrollTop);
    	z-index:3;
    }
    #Fixed_shimCol {
    	position:absolute;
    	top: expression(this.offsetParent.scrollTop);
    	left: expression(parentNode.scrollLeft);
    	z-index:2;
    }
    #Fixed_middle select {
    	z-index:1;
    }
    #Fixed_middle th.locked {
    	position:relative;
    	top: expression(this.offsetParent.scrollTop);
    	left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
    	z-index:7;
    	border-right-width:1;
    }
    #Fixed_middle td.locked {
    	position:relative;
    	left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
    	z-index:6;
    	border-right-width:1;
    	border-bottom-width:1;
    }
</style>


<script>

</script>

</head>
<body onload="Fixed.init(true);">



	<div id="Fixed_top">
		<h1>テーブルヘッド固定</h1>
		<a href="./fixedTable1">再表示</a><br/><br/>
	</div>



	<div id="Fixed_middle" style="margin-left:50px;">
		<table class="sample">
			<thead style="height:30;">
				<tr>
					<th class="a locked Fixed_left">カラム１</th>
					<th class="a locked">カラム２</th>
					<th class="a">カラム３</th>
					<th class="a">カラム４</th>
					<th class="a">カラム５</th>
					<th class="a">カラム６</th>
					<th class="a">カラム７</th>
					<th class="a">カラム８</th>
					<th class="a">カラム９</th>
					<th class="a">カラム１０</th>
					<th class="a">カラム１１</th>
					<th class="a">カラム１２</th>
					<th class="a">カラム１３</th>
					<th class="a">カラム１４</th>
					<th class="a">カラム１５</th>
					<th class="a">カラム１６</th>
					<th class="a">カラム１７</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${dataList}" var="line" >
					<tr>
						<td class="locked Fixed_left" >${line.str1}</td>
						<td class="locked">${line.str2}</td>
						<td>${line.str3}</td>
						<td>${line.str4}</td>
						<td>${line.str5}</td>
						<td>${line.str6}</td>
						<td>${line.str7}</td>
						<td>${line.str8}</td>
						<td>${line.str9}</td>
						<td>${line.str10}</td>
						<td>${line.str11}</td>
						<td>${line.str12}</td>
						<td>${line.str13}</td>
						<td>${line.str14}</td>
						<td>${line.str15}</td>
						<td>${line.str16}</td>
						<td>${line.str17}</td>
					</tr>

				</c:forEach>
			</tbody>
		</table>
	</div>

	<div id="Fixed_bottom" class="copyright" style="height:20;">(C) baka.co.jp</div>

</body>
</html>
